<template>
  <div style="padding: 0 15px;height: 700px;">
    <div style="padding: 5px;display: flex;justify-content: space-between;">
      <h1>班制设置</h1>
      <a-space>
        <a-button type="primary" @click="handleSearch()">查询</a-button>
        <a-button type="primary" icon="plus-circle" @click="handleAddModel()">添加排班</a-button>
      </a-space>
    </div>
    <div style="display: flex;flex-wrap: wrap;justify-content: left;">
      <a-card style="width: 48%;margin:10px;" v-for="(item, i) in dataList" :key="i">
        <div slot="title">{{ item.shiftSystemName }}</div>
        <div slot="extra">
          <a-space>
            <a-button type="link" icon="form" @click="handleEdit(item)">编辑</a-button>
            <a-popconfirm
              title="确认要移除吗?"
              ok-text="是"
              cancel-text="否"
              @confirm="handleDelete(record.id)"
            >
              <a-button type="link" icon="delete" style="color: red;" @click="handleDelete(item)">删除</a-button>
            </a-popconfirm>
          </a-space>
        </div>
        <div style="display: flex;flex-wrap: wrap;justify-content: left;">
          <div style="width: 30%;margin:10px;" v-for="(row, index) in item.shifts" :key="index">
            {{ row.shiftName }}
          </div>
        </div>
      </a-card>
    </div>
    <banzhi-modal ref="modalForm"></banzhi-modal>
  </div>
</template>

<script>
import moment from 'moment'
import { deleteShiftSystem, getShiftSystem } from '../../../api/customApi'
import BanzhiModal from './modules/BanzhiModal'

const path = '/crm_shift_system/crmShiftSystem'

export default {
  inject: ['selectQuery'],
  components: { BanzhiModal },
  data() {
    return {
      currentMonth: moment(),
      title: '',
      queryParam: {
        planTime: moment().format('YYYY-MM-DD')
      },
      url: {
        list: path + '/list',
        delete: path + '/delete',
        deleteBatch: path + '/deleteBatch',
      },
      dataList: []
    }
  },
  mounted() {
    this.handleSearch()
  },
  methods: {
    handleSearch() {
      getShiftSystem(this.queryParam).then((res) => {
        this.dataList = res.result.records
      })
    },
    handleAddModel() {
      this.$refs.modalForm.add()
    },
    handleEdit(record) {
      this.$refs.modalForm.edit(record)
    },
    handleDelete(record) {
      deleteShiftSystem({
        id:record.id
      }).then((res) => {
        if(res.success){
          this.$message.success(res.message);
          this.handleSearch()
        }
      })
    },
  }
}
</script>

<style scoped lang="less">

</style>